<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品块布局分析</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .pro {
      margin: 100px auto;
      width: 310px;
    }

    .pro-img {
      width: 310px;
    }

    img {
      width: 100%;
    }

    .pro-evaluate {
      padding: 30px;
      height: 95px;
      font-size: 14px;
    }

    .user-info {
      margin: 5px 0px 5px 30px;
      font-size: 12px;
      color: #888;
    }
    .pro-info{
      /* display: flex; */
      font-size: 16px;
    }
     .pro-info a {
      vertical-align: middle;
      display: inline-block;
      text-decoration: none;
      color: black;
      width: 175px;
      /* 禁止文本换行 */
      white-space: nowrap;
      /* 隐藏超出范围的内容 */
      overflow: hidden;
      /* 使用省略号 */
      text-overflow: ellipsis;  
      margin-left: 30px;
    }
     .pro-info span{
      vertical-align: middle;
      border-left: 2px solid #888;
      color: #ff6700;
      padding-left: 10px;
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div class="pro">
    <div class="pro-img"><img src="../img/pro_mod.jpg"></div><!-- 图片 -->
    <div class="pro-evaluate"> 快递牛，整体不错蓝牙可以说秒连。红米给力 </div><!-- 介绍 -->
    <div class="user-info">来自于 117384232 的评价</div><!-- 用户 -->
    <div class="pro-info"><a href="#">Redmi AirDots真无线蓝牙耳机 </a><span>99.9元</span> </div><!-- 品名售价 -->
  </div>
<!-- 最后一行没有对齐 --> 
</body>

</html>